<template>
  <div class="scroll-wrapper" ref="wrapper">
      <div class="scroll-content">
        <index-swiper
        :swiperData="swiperData"
        >
        </index-swiper>
        <main-title
        :data="{field_name:'推荐课程',field:'all'}"
        :index="0"
        ></main-title>
        <recom-course-list
        :recomCourseData="recomCourseData"
        >

        </recom-course-list>
        <div  v-for="(item, index) of fieldData" :key="index">
        <main-title
        :data="item"
        :index="index+1"
        >
        </main-title>
        <course-list
        :courseData="courseData|filterCourseData(index)"
        >

        </course-list>
       </div>
      </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'

import { PULL_DOWN_TEXT } from 'utils/config';
import IndexSwiper from './IndexSwiper'
import MainTitle from './MainTitle'
import RecomCourseList from './RecomCourseList'
import CourseList from './CourseList'
import IndexModel from 'models/index'
const indexModel=new IndexModel();
export default {
    name:"IndexScrollWrapper",
    components:{
        IndexSwiper,
        MainTitle,
        RecomCourseList,
        CourseList
    },
    data(){
        return {
         swiperData:[],
         fieldData:[],
         courseData:[],
         recomCourseData:[]
        }
    },
    mounted(){
        this.getCourseDatas();
        this.scroll=new BetterScroll(this.$refs.wrapper,{
            mouseWheel:true,
            click:true,
            tap:true,
            /* 下拉刷新配置 */
            pullDownRefresh:{
                threshold:50,
                stop:50
            }
        });
        this.scroll.on('pullingDown',this.onPullingDown);
    },
    methods:{
         async getCourseDatas(){
             const data=await indexModel.getCourseDatas(),
                   res=data.result;
             this.swiperData=res.swipers;
             this.fieldData=res.fields;
             this.courseData=res.courses;
             this.recomCourseData=res.recomCourses;
         },
         onPullingDown(){
             this.$emit('onPullingDown',PULL_DOWN_TEXT.PULLING);
             this.getCourseDatas();
             var that=this;
             setTimeout(()=>{
                 that.$emit('onFinishedPullDown',PULL_DOWN_TEXT.FINISHED);
                 setTimeout(()=>{
                     that.$emit('onResetLoadingText',PULL_DOWN_TEXT.ORIGIN);
                     that.scroll.finishPullDown();
                 },500)
             },1500)
         }
    }
}
</script>

<style lang="scss" scoped>

</style>